<template>
    <div>
        <h3>会员列表</h3>
        <input type="button" value="会员添加" @click="add" class="btn btn-primary"/>
        会员等级<select v-model="queryInfo.levelId">
        <option value="">请选择</option>
        <option :value="item.id" v-for="item in levelList.list" :key="item.id">{{item.leveName}}</option>
    </select>
    会员编号:<input type="text" v-model="queryInfo.userCode"/>会员名称:<input type="text" v-model="queryInfo.userName" />
    会员手机号:<input type="text" v-model="queryInfo.phone" />会员身份证号:<input type="text"  v-model="queryInfo.code"/>
    <input type="button" value="查询" class="btn btn-primary" @click="getList"/>
        <table class="table table-bordered table-striped">
            <tbody>
                <tr>
                    <td><input type="checkbox" v-model="checked" @click="checkAll"/></td>
                    <td>id</td>
                    <td>会员编号</td>
                    <td>会员姓名</td>
                    <td>手机号</td>
                    <td>身份证号</td>
                    <td>性别</td>
                    <td>状态</td>
                    <td>余额</td>
                    <td>积分</td>
                    <td>等级</td>
                    <td>图片</td>
                    <td>创建时间</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in data.list" :key="item.id">
                    <td><input type="checkbox" :value="item.id" v-model="ids" @click="checkOne"/></td>
                    <td>{{item.id}}</td>
                    <td>{{item.userCode}}</td>
                    <td>{{item.userName}}</td>
                    <td>{{item.phone.substring(0,3)+"****"+item.phone.substring(7)}}</td>
                    <td>{{item.code}}</td>
                    <td>{{item.sex==1?"男":"女"}}</td>
                    <td>{{item.state==1?"启用":"禁用"}}</td>
                    <td style="color:red">¥{{item.money.toFixed(2)}}</td>
                    <td>¥{{item.jiFen.toFixed(2)}}</td>
                    <td>
                        <span v-if="item.levelId==1">普通会员</span>
                        <span v-if="item.levelId==2">金卡会员</span>
                        <span v-if="item.levelId==3">白金会员</span>
                        <span v-if="item.levelId==4">黄金会员</span>
                        <span v-if="item.levelId==5">白银会员</span>
                    </td>
                    <td><img :src="item.photo" alt="" width="100px" height="100px"></td>
                    <td>{{moment(item.createTime).format("YYYY-MM-DD")}}</td>
                    <td  >
                        <input type="button" value="编辑" class="btn btn-primary" @click="Put(item.id)"/>
                        <input type="button" value="删除" class="btn btn-danger" @click="del(item.id)"/>
                        <input type="button" v-if="item.state==0" value="启用" class="btn btn-danger" @click="updataState(item.id,1)" />
                        <input type="button" v-else value="禁用" class="btn btn-danger" @click="updataState(item.id,0)"  />
                    </td>
                </tr>
                
            </tbody>
        </table>
        <div class="page">
            <span>总共{{data.totalCount}}条数据</span>
            <span>总共{{data.totalPage}}页</span>
            <span>总共{{queryInfo.pageindex}}/{{data.totalPage}}页</span>

            <input type="button" value="首页"  @click="gopage(1)"/>
            <input type="button" value="上一页" @click="gopage(queryInfo.pageindex-1)"/>
            <input type="button" value="下一页" @click="gopage(queryInfo.pageindex+1)" />
            <input type="button" value="尾页"  @click="gopage(data.totalPage)"/>
            <span v-for="item in data.totalPage" :key="item" @click="gopage(item)">{{item}}</span>
            <input type="number" v-model="queryInfo.pageindex" />
            <input type="button" value="跳转" @click="gopage(queryInfo.pageindex)"/>
            <select v-model="queryInfo.pagesize">
            <option value="" v-for="item in arr" :key="item">每页显示{{item}}条</option>
            </select>
        </div>
    </div>
    
</template>

<script setup lang="ts">
import { ref, reactive, onMounted} from 'vue';
import {useRouter } from 'vue-router';
import axios from 'axios';
import moment from 'moment';

const router = useRouter();
//向后端传递的数据
let queryInfo:any = reactive({
    levelId:'',
    userName:'',
    userCode:'',
    phone:'',
    code:'',
    pageindex:1,
    pageSize:3
});
//单个修改状态
const updataState=(id:any,state:any)=>{
    axios({
        url:'/api/user/updataState',
        method:'put',
        params:{
            id:id,
            state:state
        }
       
    })
    .then((res)=>{
        console.log(res);
        if(res.data>0){
            alert('修改成功');
            getList();
        }
        else{
            alert('修改失败');
        }
    })
    .catch((err)=>{
        console.log(err);
    })
}
//控制单个复选框 选中与没有选择
let checked=ref(false);
//声明一个数组存储Id
let ids=ref([]);
//全选全不选
const checkAll=()=>{
    //先知道自己有没有选中
    // if(checked.value==true){
    //     checked.value=false;
    // }
    // else{
    //     checked.value=true;
    // }
    checked.value=!checked.value;
    if(checked.value==true){
       ids.value=data.list.map((item:any)=>{
           return item.id;
       })
    }
    else{
        ids.value=[];
    }
}
//单选
const checkOne=()=>{
    if(data.list.lenght==ids.value.length){
        checked.value=true;
    }
    else{
        checked.value=false;
    }
}
//批量删除
const delAll=()=>{
};


//函数
const showUserList=()=>{
    queryInfo.pageindex=1;
    getList();
}
let arr=ref([2,4,6,8]);//15条以上才能分页 2,4,6,8表示页容量
//分页
const gopage=(num:any)=>{
    console.log(num);
    queryInfo.pageindex=num;
   
    if(num<1){
        queryInfo.pageindex=1;
        return;
    }
    if(num>data.totalPage){
        queryInfo.pageindex=data.totalPage;
        return;
    }
    queryInfo.pageindex=num;
    getList();
}
//会员等级                  
let levelList:any=reactive({
    list:[],
});
//接受后端返回的数据
let data:any=reactive({
    list:[],
    totalCount:0,
    totalPage:0,
    
});
//跳转到会员增加
const add = () => {
    router.push('/userAdd')
}
//单删
const del=(id:any)=>{
    //友好提示
    var f=confirm('确定删除吗？');
    if(f){
        axios({
            url:'/api/User/Deluseritem',
            method:'delete',
            params:{
                id:id
            },
        })
        .then((res)=>{
            console.log(res);
            if(res.data>0){
                alert('删除成功');
                getList();
            }
            else{
                alert('删除失败');
            }
        })
    }
}
//修改
const Put=(id:any)=>{
    //1.跳转并传参
    router.push({
        path:'/userupdate',
        query:{
            id:id
        }
    });
}
onMounted(() => {
    getList();
    setList();
    showUserList();
})
const getList = () => {
    axios({
        url: '/api/User/GetUsersList',
        method: 'get',
        params:queryInfo,
    }).then((res) => {
        console.log(res);
        data.list = res.data.list;
        data.totalCount = res.data.totalCount;
        data.totalPage = res.data.totalPage;
    })
    .catch((err) => {
        console.log(err);
    })
};
//onMounted:生命周期钩子函数 ====文档就绪函数
//显示会员等级列表 
const setList = () => {
    axios({
        url: 'api/MemberLevel/GetMemberLeversList',
        method: 'get',
        
    })
    .then(res => {
        console.log(res);
        levelList.list = res.data
        
    })
    .catch(err => {

    })
}
</script>

<style scoped>

</style>